<template>
  <div class="recommend">
    <!--头部广告start-->
    <div>
      <div class="top-box fs-s ">
        <a href="https://hongcai.163.com/html/lottery_promotion.html?from=wapsytl_lotterynews"><img src="../assets/image/myzhang_1080170_afln_20190731.jpg" alt=""></a>
        <div >广告</div>
      </div>
    </div>
    <!--头部广告start-->
    <!--导航start-->
    <div class="wap-index-nav">
      <div class="login-bar d-flex ai-center">
        <div class="user-entry"><span class="user-info"></span></div>
        <div class="site-info"><span></span></div>
        <div class="app-entry"><div class="open-list"><span class="open-mail">邮箱</span></div></div>
      </div>
    </div>
    <!--导航end-->
    <!--头部悬浮start-->
    <van-sticky @scroll="aaa">
      <div class="xuan " :class="{in:onOff}">
        <ul class="d-flex jc-around top-nav">
          <router-link tag="li"
                  v-for="(item,i) in title"  :key="i" class="top-nav-li"
                  :class="{activeRed:active==i}" :to="`/${item.hf}`"
          ><span>{{item.name}}</span></router-link>
        </ul>
      </div>
    </van-sticky>
    <router-view/>
    <!--头部悬浮end-->
  </div>
</template>
<script>
  export default {
     props:["a"],
     data(){
       return {
         title:[
           {name:'要闻',hf:''},
           {name:'推荐',hf:'recommend'},
           {name:'原创',hf:'exclusive'},
         ],
         active:null,
         onOff:false,
       }
     },
    methods: {
       aaa(e){
         this.onOff=e.isFixed;
         //console.log(e)
       }
    },
    created() {
      this.active=this.a
    }


  }
</script>
